import React, { Component } from 'react';
import {
  Card,
  Button,
  Table,
  Menu,
  Input,
  Divider,
  Popconfirm,
  Modal,
  message,
  Radio
} from 'antd';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import styles from '../index.less';
import { getOwner } from '@/utils/authority';


const namespace = 'Inventory';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
const { Search, TextArea } = Input;

const mapStateToProps = state => {
  const category = state[namespace].category;
  const custom = category.custom;
  const system = category.system;
  const isLoading = state[namespace].categoryLoading;

  return {
    system,
    custom,
    isLoading,
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getList: (params) => {
      const action = {
        type: `${namespace}/queryCategory`,
        payload: {
          ...params,
          owner: getOwner(),
        },
      };
      dispatch(action);
    },
  };
};

@connect(
  mapStateToProps,
  mapDispatchToProps
)
export default class SelectCategory extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: '0',
      key: '',
      toptypeid: null,
    };
  }

  static propTypes  = {
    onSelect: PropTypes.func.isRequired,
  }

  componentDidMount() {
    this.reloadData();
  }

  reloadData = (params) => {
    const { type, key } = this.state;
    if(this[`type_${type}`]){
      return false;
    }
    this[`type_${type}`] = true;
    this.props.getList({ type: type, key: key, ...params });
  }

  handleSelect = (record) => {
    this.props.onSelect(record);
  }

  render() {
    const { type } = this.state;
    const { isLoading, custom, system } = this.props;
    const list = type == '0' ? custom : system;

    const columns = [
      {
        title: '配件分类',
        dataIndex: 'name',
        key: 'name',
        render: (value, record) => {
          const obj = {
            children: value,
            props: {
              title: "点击选择配件分类",
              onClick: record.toptypeid ? () => this.handleSelect(record) : null
            },
          };
          return obj;
        }
      }
    ];

    const TopBar = (
      <div className={styles.topBar}>
        <RadioGroup
          value={type}
          onChange={e => {
            this.setState({ 
              type: e.target.value 
            }, this.reloadData);
          }}
        >
          <RadioButton value="0">自定义</RadioButton>
          <RadioButton value="1">系统</RadioButton>
        </RadioGroup>
        {/* <Search className={styles.extraContentSearch}
          placeholder="输入关键字"
          enterButton
          all
          onSearch={(v, e) => {
            this.setState({ key: v }, () => {
              this.reloadData()
            })
          }} /> */}
      </div>
    );

    return (
      <div>
        {TopBar}
        <Table
          bordered
          columns={columns}
          loading={isLoading}
          dataSource={list}
          rowKey="_id"
          childrenColumnName="subtype"
          pagination={false}
        />
      </div>
    );
  }
}